<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例三</title>
    <style>
        body {
            background-image: url(img/bg.png);

        }

        div {
            box-sizing: border-box;
            margin-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .div_center {
            width: 400px;
            margin: auto;
            margin-top: 100px;
            background-color: white;
            box-shadow: 0px 0px 150px 1px black;
        }

        .align_center {
            padding-top: 1px;
            text-align: center;
            color: orangered;
        }

        .div_hr {
            width: 100%;
            height: 1px;
            background-color: gray;
            clear: both;
        }

        .align_right {
            width: 40%;
            float: left;
            text-align: right;
        }

        .align_left {
            width: 60%;
            float: left;
            text-align: left;
        }

        select {
            width: 110px;
        }

        #desc {
            resize: none;
        }

        .footer {
            padding-bottom: 15px;
        }

        button {
            border: solid 1px crimson;
            border-radius: 5px;
            width: 25%;
            height: 40px;
            background-color: crimson;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div><img src="img/logo.png" alt="logo"></div>
<div class="div_center">
    <!-- 虚拟路径+资源路径 -->
    <form action="/dem03" method="get">
        <div class="align_center"><h3>注&emsp;册&emsp;详&emsp;情</h3></div>
        <div class="div_hr"></div>

        <div class="align_right"><label for="name">姓名:</label></div>
        <div class="align_left"><input type="text" id="name" placeholder="请输入姓名" name="name"></div>
        <div class="align_right"><label for="pass">密码:</label></div>
        <div class="align_left"><input type="text" id="pass" placeholder="请输入密码" name="pass"></div>
        <div class="align_right"><label for="email">邮箱:</label></div>
        <div class="align_left"><input type="email" id="email" placeholder="请输入邮箱" name="email"></div>
        <div class="align_right"><label for="phone">手机:</label></div>
        <div class="align_left"><input type="text" id="phone" placeholder="请输入手机" name="phone"></div>
        <div class="div_hr"></div>

        <div class="align_right"><label>性别:</label></div>
        <div class="align_left">
            <input type="radio" name="sex" id="male" value="0" checked><label for="male">男</label>
            <input type="radio" name="sex" id="female" value="1"><label for="female">女</label>
        </div>
        <div class="align_right"><label>爱好:</label></div>
        <div class="align_left">
            <input type="checkbox" name="hobby" id="music" value="音乐"><label for="music">音乐</label>
            <input type="checkbox" name="hobby" id="movie" value="电影"><label for="movie">电影</label>
            <input type="checkbox" name="hobby" id="game" value="游戏"><label for="game">游戏</label>
        </div>
        <div class="align_right"><label for="birthday">出生日期:</label></div>
        <div class="align_left"><input type="date" id="birthday" name="birthday" value="2000-01-01"></div>
        <div class="align_right"><label for="city">所在城市:</label></div>
        <div class="align_left">
            <select id="city" name="city">
                <option value="-1">请选择</option>
                <optgroup label="直辖市">
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                </optgroup>
                <optgroup label="省会市">
                    <option value="2">西安</option>
                    <option value="3">成都</option>
                </optgroup>
            </select>
        </div>
        <div class="div_hr"></div>

        <div class="align_right">
            <label for="desc">个性签名:</label>
        </div>
        <div class="align_left">
            <textarea id="desc" name="desc" rows="2" cols="22" placeholder="请写下您的与众不同..."></textarea>
        </div>
        <div class="div_hr"></div>

        <div class="align_center footer">
            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </div>
    </form>
</div>
</body>
</html>